<template>
	<div id="Homepage">
	<el-container>
	  <el-header style="height: 230px;">
		 <div class="container"style="height:210px; width: 1524px;">
			<div class="header-wrap" style="height: 100px; width: 1524px;" >
				 <div class="logo-left">
			 			  <a href="#">
			 				  <img style="height: 80px;" src="@/assets/imgs/theme/logo.png" alt="logo" />
			 			  </a>
			 </div>
			 <div class="header-right">
			 			<div class="header-right-input">
							<template>
							  <el-select @change="sortProduct(selectvalue)" v-model="selectvalue" filterable placeholder="请选择">
							    <el-option
							      v-for="item in options"
							      :key="item.id"
							      :label="item.productTypeName"
							      :value="item.id">
							    </el-option>
							  </el-select>
							</template>
							  <el-input style="width: 500px;" v-model="input" placeholder="请输入内容" ></el-input>
							  <el-button type="primary" @click="selectProduct">查询</el-button>
						</div>	
						<div class="header-right-icon">
							<el-badge :value="12" class="item"  type="success">
							<a href="#"><i class="el-icon-star-off"></i></a>
							</el-badge>
							<label>收藏</label>
              <!-- @click="gerenzhongxin" -->
              <router-link to="/Lndividual"><i
                  class="el-icon-user"></i></router-link><label>个人中心</label>
              <a href="#"><i class="el-icon-shopping-cart-2"
                             @click="showCart"></i></a><label>购物车</label>
              <el-drawer title="我的手推车" :visible.sync="drawer" :with-header="false" size="30%"
                         direction="rtl" :destroy-on-close="true">
                <div class="offcanvas">
                  <div class="offcanvas-header">
                    <h5 class="offcanvas-title">我的手推车<span>(05)</span></h5>
                    <el-button type="text" @click="drawer = false">
                      <i class="el-icon-close"></i>
                    </el-button>
                  </div>
                  <div class="offcanvas-body">
                    <ul class="cart-list">
                      <li class="cart-item" v-for="(item, index) in cartItems" :key="index">
                        <div class="cart-img">
                          <img :src="item.product.imgUrl" alt="product" class="img-fluid">

                        </div>
                        <div class="cart-text">
                          <a class="cart-title" href="#">{{ item.product.productName
                            }}</a>
                          <p class="price">${{ item.product.productPrice }} <del>{{
                              item.num }}</del></p>
                        </div>
                        <!-- 删除按钮 -->
                        <el-button type="danger" class="delbutton" icon="el-icon-delete"
                                   @click="removeItem(item)"></el-button>
                      </li>
                    </ul>
                  </div>
                  <el-button type="warning" class="gwc"
                             @click="goToShoppingCart()">前往购物车</el-button>
                  <!-- <router-link to="/Shopping" class="gwc"
                    @click="goToShoppingCart()">前往购物车</router-link> -->
                </div>
              </el-drawer>
            </div>
       </div>
      </div>
			<div class="header-wrap-2">
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" >
				  <el-menu-item index="1">处理中心</el-menu-item>
				  <el-submenu index="2">
				    <template slot="title">商品类型1</template>
				    <el-menu-item index="2-1">商品类型1</el-menu-item>
				    <el-menu-item index="2-2">商品类型2</el-menu-item>
				    <el-menu-item index="2-3">商品类型3</el-menu-item>
				    <el-submenu index="2-4">
				      <template slot="title">商品类型4</template>
				      <el-menu-item index="2-4-1">选项1</el-menu-item>
				      <el-menu-item index="2-4-2">选项2</el-menu-item>
				      <el-menu-item index="2-4-3">选项3</el-menu-item>
				    </el-submenu>
				  </el-submenu>
				  <el-menu-item index="3" disabled>导航1</el-menu-item>
				  <el-menu-item index="4" >导航2</el-menu-item>
				  <el-menu-item index="5" >导航3</el-menu-item>
				  <el-menu-item index="6" >导航4</el-menu-item>
				  <el-menu-item index="7" >导航5</el-menu-item>
				  <el-submenu index="8">
					  <template slot="title">导航6</template>
					  <el-menu-item index="2-1">商品类型1</el-menu-item>
					  <el-menu-item index="2-2">商品类型2</el-menu-item>
					  <el-menu-item index="2-3">商品类型3</el-menu-item>
				  </el-submenu>
				  <el-menu-item index="9"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
				</el-menu>
				<div class="header-wrap-2-right hotline">
					<img style="width: 45px; margin-right: 8px;" src="@/assets/imgs/theme/daohang.png" alt=""/>
					<p class="header-wrap-2-right-p">1900 - 888</p>
					<span class="header-wrap-2-right-span" >24/7 Support Center</span>
				</div>
			</div>
			
		 </div>
			
		
	  </el-header>
		 
		  <el-main>
		  <template>
		    <el-carousel indicator-position="outside">
		      <el-carousel-item v-for="x in item" :key="x.id">
		        <h3><img style=" width:1200px;margin-left: 60px;"  :src="x.img"/></h3>
		      </el-carousel-item>
		    </el-carousel>
		  </template>
	  </el-main>
	  
	<div class="section-title">  
	<div class="title">
		<h3 style="color: #253D4E;">推荐商品</h3>
		<a href="#" class="show-all">All Categories ></a>
	</div>
	  </div>
	  <el-row style="margin-top: 50px; margin-left: -20px;">
	    <el-col :span="4" v-for="(f, index) in recommended" :key="index" :offset="index > 0 ? 1 : 1" style="margin-left: 7.16667%">
	      <el-card :body-style="{ padding: '0px' }" class="type-a">
	        <img :src="f.imgUrl" class="image">
	        <div style="padding: 14px;">
	          <span><a href="#">{{f.productName}}</a></span>
				<span style="margin-left: 20px; color:#3BB77E ;">{{f.productPrice}}元</span>
	          <div class="bottom clearfix">
	            <time class="time">{{ f.productDetail }}</time>
	            <el-button type="text" class="ShoppingBut">
					<a href="#" class="gouwuche"><i  class="el-icon-shopping-cart-full"><span @click="addCart(f)">加入</span></i></a>
				</el-button>
	          </div>
	        </div>
	      </el-card>
	    </el-col>
	  </el-row>
	
		





	  
	  <div class="section-title3" style="margin-top: -20px;">
	  <div class="title3">
	  	<h3 style="color: #253D4E;">促销商品</h3>
	  </div>
	    </div>
	    <el-row style="margin-top: 160px; margin-left: -20px;">
	      <el-col :span="4" v-for="(f, index) in clothes" :key="index" :offset="index > 0 ? 1 : 1" style="margin-left: 7.16667%">
	        <el-card :body-style="{ padding: '0px' }" class="type-a2">
	          <img :src="f.imgUrl" class="image">
	          <div style="padding: 14px;">
	            <span><a href="#">{{f.productName}}</a></span>
	    				<span style="margin-left: 20px; color:#3BB77E ;">{{f.productPrice}}元</span>
              <div class="bottom clearfix2">
                <time class="time2">{{ f.productDetail }}</time>
                <el-button type="text" @click="addCart(f)" class="ShoppingBut">
                  <a href="#" class="gouwuche">
                    <i class="el-icon-shopping-cart-full"><span>加入</span></i>
                  </a>
                </el-button>
              </div>
	          </div>
	        </el-card>
	      </el-col>
	    </el-row>

    <div class="section-title3" style="margin-top: -20px;">
      <div class="title3">
        <h3 style="color: #253D4E;" id="q">商品</h3>
      </div>
    </div>
    <el-row style="margin-top: 160px; margin-left: -20px;">
      <el-col :span="4" v-for="(f, index) in product" :key="index" :offset="index > 0 ? 1 : 1" style="margin-left: 7.16667%">
        <el-card :body-style="{ padding: '0px' }" class="type-a2">
          <img :src="f.imgUrl" class="image" @click="productD(f.id)">
          <div style="padding: 14px;">
            <span><a href="#" onclick="return false;"  @click="productD(f.id)">{{f.productName}}</a></span>
            <span style="margin-left: 20px; color:#3BB77E ;">{{f.productPrice}}元</span>
            <div class="bottom clearfix2">
              <time class="time2" >{{ f.productDetail }}</time>
              <el-button type="text" class="ShoppingBut" @click="productD">
                <a href="#" onclick="return false;"  @click="productD(f.id)"  class="gouwuche"><i  class="el-icon-shopping-cart-full"><span >加入</span></i></a>
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-container>
  </div>
</template>

<script>
	export default{
		data() {
			return{
        // 控制抽屉显示隐藏
        drawer: false,
        // 购物车商品项数组
        cartItems: [],
        //文本框所查的商品
        product:[],
        //促销商品 只看该商品销售最少的前几条
        clothes:[],
				//分类下拉框的id 值
				selectvalue:'',
				//推荐商品
				recommended:[],
				item:[
					{id:1,gg:"广告一",img:require("@/assets/imgs/main/num1.png")},
					{id:2,gg:"广告一",img:require("@/assets/imgs/main/num2.png")},
				],
				value: [],
				//商品分类下拉框的值
				options: [],
				activeIndex: '2',
				//搜索文本框
				input:'',
				currentDate: new Date(),
        cart: {
          productId: '',
          num: 1,
        },
       
			}
		},
		created() {
		  this.option(),
		  this.selectRecommended(),
		  this.selectClothes()
		},
		methods:{
      // 前往购物车的方法
      goToShoppingCart() {
        // 清空手推车数据
        console.log(111,this.cartItems)
        sessionStorage.setItem('cartItems', JSON.stringify(this.cartItems));
        this.cartItems = [];
        // 导航到购物车页面
        this.$router.push('/Shopping');
      },
      async removeItem(item) {
        try {
          // 从购物车中删除商品项
          const res = await this.$http.delete(`/buy/cart/remove/${item.id}`);
          if (res == "ok") {
            this.$message.success('删除成功！');
            this.showCart()
          } else {
            this.$message.success('删除成功！');
			this.showCart()
          }
        } catch (error) {
          console.error('Error deleting cart item from server:', error);
        }
      },
      async productP(id) {
        console.log(0, id)
        sessionStorage.setItem('dazhe', id)
        sessionStorage.setItem('productId', 0)
        this.$router.push('/productdetails')
      },

      async productD(id) {
        console.log(0, id)
        sessionStorage.setItem('productId', id)
        sessionStorage.setItem('dazhe', 0)
        this.$router.push('/productdetails')
      },
      // 显示手推车的方法
      async showCart() {
	    const customerId=sessionStorage.getItem('token')
        this.drawer = true; // 打开抽屉
        try {
          const res = await this.$http.get(`/buy/cart/showCart/${customerId}`);
          this.cartItems = res.data;
		  console.log(234,this.cartItems)
        } catch (error) {
          console.error('Error fetching cart items:', error);
          this.$message.error('获取购物车数据失败');
        }
      },
      // 加入购物车的方法
      async addCart(product) {
         const consumerId= sessionStorage.getItem('token')
        const CartVo = {
          productId: product.id,
          num: 1, // 默认添加数量为1
          consumerId: consumerId
        };
        console.log(888, CartVo)
        const res = await this.$http.post(`/buy/cart/addCart`, CartVo);
        this.showCart()


        if (res.data == true) {
          this.$message.success("添加购物车成功！！！");
          // 保存手推车数据到 sessionStorage
          // 可以选择在这里刷新手推车的显示
          this.showCart();
        } else {
          this.$message.error("添加购物车失败！");
        }
      },

      // gerenzhongxin(){
      // 	var token=sessionStorage.getItem('token')
      // 	if(!token || token=='undefined'){
      // 		this.$router.push('/login')
      // 	}
      // },
			//下拉框分类查询不同的商品
			async sortProduct(id){
				console.log(123,id)
				const {data : res}=await this.$http.post(`/buy/product/sortProduct/${id}`,id)
				 this.$router.push('/sort',id)
				 sessionStorage.setItem('sort', id)
				console.log(res)
			},
			//主页查询分类是服饰的商品
			async selectClothes(){
				const {data : res} =await this.$http.post('/buy/product/selectClothes')
				this.clothes=res
				
			},
			 //主页查询推荐商品 只查今年的商品
			async selectRecommended(){
				const {data : res} =await this.$http.post('/buy/product/selectFood')
				this.recommended=res
				
			},
			//主页文本搜索框
			async selectProduct(){
				console.log(22222,this.selectvalue)
				// console.log(111,this.input)
				// const {data : res} =await this.$http.post('/buy/product/selectProduct',this.input)
				// console.log(111,this.input)
				// console.log(111,res)
			},
			 handleSelect(key, keyPath) {
			        console.log(key, keyPath);
			      },
				  //主页下拉搜索框
			async option(){
				const {data: res} =  await this.$http.post('/buy/productType/getProType')
				// for(let i =0;i<res.size;i++){
					this.options=res
				// }
			
			},
		}
	}
</script>

<style scoped>
.new {
  background-color: #3BB77E;
  color: #ffffff;
  margin-top: 20px;
  border: 1px solid #3BB77E;
  border-radius: 4px;

}

.cuxiao {
  background-color: orange;
  color: #ffffff;
  margin-top: 20px;
  border: 1px solid #3BB77E;
  border-radius: 4px;

}
	.gouwuche{
		width: 85px;
		height: 36px;
		border: 1px solid #3BB77E;
		background-color: #DEF9EC;
		border-radius: 4px;
		display: inline-block;
		margin-left: 26px;
		span{
			font-size: 18px;
			color:#3BB77E ;
			margin-left: 7px;
			margin-top: 10px;
		}
		i {
			font-size: 18px;
			color:#3BB77E ;
			margin-left: 7px;
			margin-top: 10px;
		}
	}
	.gouwuche:hover{
		background-color: #3BB77E;
		 transform: translateY(-2px);
		span{
			
			color: white;
		}
		i {
			color: white;
		}
	}
	.allspan{
		/* 行内元素 转换为 块级元素 */
					display: block;
					width: auto;
					height: auto;
					color:black;
	}
	 .time {
	    font-size: 13px;
	    color: #999;
	  }
	  .time2{
	     font-size: 13px;
	     color: #999;
	   }
	  .bottom {
	    margin-top: 13px;
	    line-height: 12px;
	  }
	
	  .button {
	    padding: 0;
	    float: right;
	  }
	
	  .image {
	    width: 100%;
	    display: block;
	  }
	  .image2 {
	    width: 100%;
	    display: block;
	  }
	
	  .clearfix:before,
	  .clearfix:after {
	      display: table;
	      content: "";
	  }
	  
	  .clearfix:after {
	      clear: both
	  }
	.clearfix2:before,
	.clearfix2:after {
	    display: table;
	    content: "";
	}
	
	.clearfix2:after {
	    clear: both
	}
	
	.card-1{
		margin-bottom: -90px;
	}
	.section-title2 {
		height: 100px;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: end;
	    margin-bottom: -150px;
	    position: relative;
	    -webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	}
	.section-title2 .title2 {
		height: 100px;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-orient: horizontal;
	    -webkit-box-direction: normal;
	    -ms-flex-flow: row;
	    flex-flow: row;
	    -webkit-box-align: end;
	    -ms-flex-align: end;
	    align-items: flex-end;
	}
	.section-title2 h3 {
	    font-weight: 700;
	    font-size: 32px;
	    margin-right: 30px;
		    margin-top: 300px;
	}
	.section-title2 a.show-all2 {
	    font-size: 16px;
	    color: #7E7E7E;
		    text-decoration: none;
		    cursor: pointer;
			margin-top: 20px;
	}
	
	.section-title3 {
		height: 100px;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: end;
	    margin-bottom: -150px;
	    position: relative;
	    -webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	}
	.section-title3 .title3{
		height: 100px;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-orient: horizontal;
	    -webkit-box-direction: normal;
	    -ms-flex-flow: row;
	    flex-flow: row;
	    -webkit-box-align: end;
	    -ms-flex-align: end;
	    align-items: flex-end;
	}
	.section-title3 h3 {
	    font-weight: 700;
	    font-size: 32px;
	    margin-right: 30px;
		    margin-top: 300px;
	}
	.section-title3 a.show-all3 {
	    font-size: 16px;
	    color: #7E7E7E;
		    text-decoration: none;
		    cursor: pointer;
			margin-top: 20px;
	}
	
	
	
	
	.type-a{
		margin-bottom: 20px;
		border: 1px solid black;
		a:hover{
			color: #3BB77E;
			 transition: color 0.3s ease;
		}
	}
	
	.type-a:hover{
		border: 1px solid #3BB77E;
		background-color: white;
		 transform: translateY(-2px);
	}
	.type-a2{
		margin-bottom: 20px;
		border: 1px solid black;
		a:hover{
			color: #3BB77E;
			 transition: color 0.3s ease;
		}
	}
	
	.type-a2:hover{
		border: 1px solid #3BB77E;
		background-color: white;
		 transform: translateY(-2px);
	}
	.zz{
		color: #253D4E;
	}
	.zz:hover{
		 color: #3BB77E;
	}
	
	.show-all:hover{
		
		color: #3BB77E;
	}
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: -230px;
	    }
	  }
	  
	 
	 
	.section-title {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: end;
	    margin-bottom: -32px;
	    position: relative;
	    -webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	}
	.section-title .title {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-orient: horizontal;
	    -webkit-box-direction: normal;
	    -ms-flex-flow: row;
	    flex-flow: row;
	    -webkit-box-align: end;
	    -ms-flex-align: end;
	    align-items: flex-end;
	}
	.section-title h3 {
	    font-weight: 700;
	    font-size: 32px;
	    margin-right: 30px;
		    margin-top: -22px;
	}
	.section-title a.show-all {
	    font-size: 16px;
	    color: #7E7E7E;
		    text-decoration: none;
		    cursor: pointer;
			margin-top: 20px;
	}
	
	
	 .el-carousel__item h3 {
	    color: #ffffff;
	    font-size: 18px;
	    opacity: 0.75;
	    line-height: 300px;
	    margin: 0;
	  }
	  
	  .el-carousel__item:nth-child(2n) {
	    background-color: #ffffff;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
	    background-color: #ffffff;
	  }
	
	p:last-child {
	    margin-bottom: 0;
	}
	.header-wrap-2-right{
		    margin-left: 526px;
	}
	 .hotline p {
	    color: #3BB77E!important;
	}
	.header-wrap-2-right-span {
	    font-weight: 500;
	    font-size: 12px;
	    font-family: "Lato",sans-serif;
	    color: #7E7E7E;
	    display: block;
	    letter-spacing: .9px;
		margin-top: 25px;
		margin-right: 20px;
	}
	
	p {
	    font-size: 1rem;
	    font-weight: 400;
	    line-height: 24px;
	    margin-bottom: 5px;
	    color: #7E7E7E;
		    margin: 0;
		    padding: 0;
		    border: 0;
		    font-size: 100%;
		    font: inherit;
		    vertical-align: baseline;
			    margin-top: 0;
			    margin-bottom: 1rem;
				    margin-right: -155px;
	}
.hotline p {
    color: #3BB77E;
    font-size: 26px;
    font-weight: 700;
    font-family: "Quicksand",sans-serif;
    display: block;
    line-height: 1;
}
	.header-wrap-2{
		height: 74px;
		width: 1564px;
		border-top: 1px solid  darkgray;
		border-bottom: 1px solid  darkgray;
		margin-top: 110px;
	margin-left: -1543px;
	}
	.header-right{
		margin-left: -70px;
	}
	.header-right-icon{
		margin-left: 100px;
		label{
			color: darkgray;
		}
		i{
			font-size: 30px;
		}
		a{
			margin-left: 3px;
			padding: 3px;
		}
	}
	a{
		text-decoration: none;
		color: #333;
	}
	.header-right-input{
		background-color: #ffffff;
		margin-left: 160px;
	}
	.header-wrap{
		margin-top: -80px;
	}
	#Homepage{
		height: 100%;
	}
	 .el-header, .el-footer {
	    background-color: #ffffff;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
		/* 
		在flex 布局的容器中，
		可以设置justify-content: space-between;实现两对齐
		*/
		display: flex;
		justify-content: space-between;
		/* 当容器是flext，可以设置 align-items: center */
		align-items: center;
		div {
		  display: flex;
		  align-items: center;
		}
		span {
		  margin-left: 20px;
		}
	  }
	  .el-main {
	    background-color: white;
	    color: white;
	    text-align: center;
	    line-height: 160px;
	  }
	    body > .el-container {
	      margin-bottom: 40px;
	    }
  /* 手推车 */
  .offcanvas {
    width: 600px;
    background-color: #FEFDFB;
    border-radius: 4px;
    /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);   */
    display: flex;
    flex-direction: column;
    /* 设置flex子元素为垂直排列 */
    height: 100%;
    /* 或者其他你需要的值 */
  }

  .delbutton {
    margin-left: 125px;
  }

  .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    background-color: #F2A22A;
    /* 标题栏背景色 */
    border-bottom: 1px solid #ddd;
    margin-left: -320px;
  }

  .offcanvas-body {
    padding-top: 20px;
    /* 在标题和列表之间添加间距 */
    margin-left: -70px;
  }

  .cart-list {
    /* ... 列表样式 ... */
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .offcanvas-title {
    margin: 0;
  }

  .cart-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .cart-img {
    flex: 0 0 100px;
    /* 固定图片宽度 */
    margin-right: 20px;
    position: relative;
  }

  .cart-img img {
    width: 100%;
    height: auto;
    border-radius: 4px;
  }

  .del_icon {
    position: absolute;
    top: 5px;
    right: 5px;
    /* background-color: rgba(255, 0, 0, 0.5); */
    color: #e31414;
    /* border-radius: 50%; */
    font-size: 15px;
    cursor: pointer;
  }

  .cart-text {
    flex: 1;
  }

  .cart-title {
    font-weight: bold;
    margin: 0 0 5px 0;
  }

  .price {
    font-size: 14px;
    color: #888;
  }

  .price del {
    margin-right: 5px;
    color: #ccc;
  }

  .gwc {
    width: 260px;
    height: 60px;
    background-color: #F2A22A;
    text-align: center;
    /* 水平居中 */
    line-height: 40px;
    /* 垂直居中（通过行高与高度相同实现） */
    display: inline-block;
    /* 如果需要的话，使元素成为内联块元素 */
  }
</style>